<template>
    <v-hover v-slot:default="{ hover }">
        <v-card :elevation="hover ? 12 : 2" height="350" @click="toTool">
            <v-card-title>{{tool.toolName}}</v-card-title>
            <v-divider></v-divider>
            <v-container>
                <v-layout justify-space-around row>
                    <v-flex xs5>
                        <v-card-text class="my-4 text-center title">
                            {{tool.description}}
                        </v-card-text>
                    </v-flex>
                    <v-flex xs3 mr-1 align-self-center v-if="tool.img1">
                        <img :src="require(`@/assets/tool/${tool.img1}`)"/>
                    </v-flex>
                    <v-flex xs3 align-self-center v-if="tool.img2">
                        <img :src="require(`@/assets/tool/${tool.img2}`)"/>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-card>
    </v-hover>
</template>

<script>
    export default {
        name: "ToolLink",
        props: {
            tool: Object
        },
        data: () => ({
            ivalue: true
        }),
        methods: {
            toTool() {
                this.$router.push(this.tool.toolLink);
            }
        }
    }
</script>

<style scoped>

</style>
